<template>
  <div class="box3">
    <h2>饿了么</h2>
    <ul>
      <li>全部</li>
      <li>待消费</li>
      <li>待评价</li>
      <li>退款</li>
    </ul>
    <div class="one">
      <div class="top">
        <img src="" alt="" />
        <h3>纯手工饺子馆（风城九路店）</h3>
        <span>已送达</span>
      </div>
      <div class="top-span">
        <span>10减3</span>
        <span>25减10</span>
        <span>50减21</span>
      </div>
      <div class="zhong">
        <div class="img2">
          <img src="" alt="" />
          <img src="" alt="" />
        </div>
      <div class="right">
        <h4>￥17.8</h4>
        <p>共2件</p>
      </div>
     
      </div>
       <div class="xia">
        <span>再来一单</span>
      </div>
    </div>
    <div class="one">
      <div class="top">
        <img src="" alt="" />
        <h3>纯手工饺子馆（风城九路店）</h3>
        <span>已送达</span>
      </div>
      <div class="top-span">
        <span>10减3</span>
        <span>25减10</span>
        <span>50减21</span>
      </div>
      <div class="zhong">
        <div class="img2">
          <img src="" alt="" />
          <img src="" alt="" />
        </div>
      <div class="right">
        <h4>￥17.8</h4>
        <p>共2件</p>
      </div>
     
      </div>
       <div class="xia">
        <span>再来一单</span>
      </div>
    </div>
    <div class="one">
      <div class="top">
        <img src="" alt="" />
        <h3>纯手工饺子馆（风城九路店）</h3>
        <span>已送达</span>
      </div>
      <div class="top-span">
        <span>10减3</span>
        <span>25减10</span>
        <span>50减21</span>
      </div>
      <div class="zhong">
        <div class="img2">
          <img src="" alt="" />
          <img src="" alt="" />
        </div>
      <div class="right">
        <h4>￥17.8</h4>
        <p>共2件</p>
      </div>
     
      </div>
       <div class="xia">
        <span>再来一单</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box3 {
  padding: 10px;
  background: antiquewhite;
}
.box3 h2 {
  text-align: center;
}
.box3 ul {
  display: flex;
  height: 40px;
  margin: 10px;
}
.box3 ul li {
  margin-right: 15px;
  text-align: center;
  line-height: 40px;
}
.box3 .one {
  background: white;
  padding: 10px;
  overflow: auto;
}
.one .top {
  display: flex;
  align-items: center;
}
.one .top img {
  width: 40px;
  height: 40px;
  background: blue;
  border-radius: 15px;
  margin-right: 10px;
}
.one .top h3 {
  flex: 1;
}
.one .top-span {
  margin: 10px;
}
.one .top-span span {
  margin: 10px;
  border: 1px solid red;
  padding: 2px 5px;
  border-radius: 10px;
  font-size: 14px;
}
.one .zhong {
  display: flex;
}
.one .zhong .img2 {
  flex: 1;
  margin: 10px;
}
.one .zhong img {
  width: 80px;
  height: 80px;
  background: pink;
  margin-right: 10px;
  border-radius: 10px;
}
.one .zhong .right h4{
  font-size: 20px;
}
.one .zhong .right p{
  color: rgb(158, 158, 158);
}
.one .xia{
  display: inline-block;
  margin-top: 20px;
  padding: 5px 10px;
  font-size: 20px;
  border-radius: 20px;
  color: blue;
  border: 1px solid blue;
  margin-left: 70%;
}
</style>